<template>
  <div class="modal-editor-html">
    <je-modal
      v-model:visible="visibleModule"
      width="1000px"
      height="600px"
      :title="modalEditorData.title"
      :resize="false"
      :maximizable="true"
      cancel-button
      :ok-button="addModule"
      @close="cancelModal"
    >
      <je-editor-html
        ref="editorRef"
        v-model:value="modalEditorData.value"
        width="100%"
        height="100%"
      />
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive } from 'vue';
  import { Modal, EditorHtml } from '@jecloud/ui';

  export default defineComponent({
    name: 'ModalEditorHtml',
    components: {
      JeModal: Modal,
      JeEditorHtml: EditorHtml,
    },
    props: {
      editorValue: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const modalEditorData = reactive({
        title: props.editorValue.title,
        value: props.editorValue.value,
      });

      const cancelModal = () => {
        emit('closeModal', { type: 'close' });
      };

      const addModule = () => {
        emit('closeModal', { type: 'ok', value: modalEditorData.value });
      };

      return { modalEditorData, visibleModule: true, cancelModal, addModule };
    },
  });
</script>
<style lang="less" scoped>
  .modal-editor-html {
  }
</style>
